<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - 任务平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, #1890ff, #096dd9);
            color: white;
            padding: 12px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .logo {
            font-size: 24px;
            font-weight: 700;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 8px;
            font-size: 28px;
        }
        
        .nav-menu {
            display: flex;
        }
        
        .nav-item {
            margin-left: 20px;
            font-size: 16px;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 4px;
            transition: background 0.3s;
        }
        
        .nav-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        /* 页面标题 */
        .page-header {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            padding: 50px 0;
            text-align: center;
            margin-bottom: 50px;
        }
        
        .page-title {
            font-size: 42px;
            font-weight: 700;
            margin-bottom: 15px;
            color: #096dd9;
        }
        
        .page-subtitle {
            font-size: 18px;
            color: #666;
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* 联系信息卡片 */
        .contact-section {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 60px;
            gap: 30px;
        }
        
        .contact-info {
            flex: 1;
            min-width: 300px;
        }
        
        .contact-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            padding: 30px;
            margin-bottom: 30px;
            transition: transform 0.3s;
        }
        
        .contact-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .card-icon {
            width: 60px;
            height: 60px;
            background: #e6f7ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #1890ff;
            margin-right: 15px;
        }
        
        .card-title {
            font-size: 24px;
            font-weight: 600;
            color: #333;
        }
        
        .contact-list {
            list-style: none;
        }
        
        .contact-item {
            display: flex;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f0f0f0;
            align-items: flex-start;
        }
        
        .contact-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .contact-item i {
            font-size: 20px;
            color: #1890ff;
            min-width: 30px;
            margin-top: 3px;
        }
        
        .contact-details {
            flex: 1;
        }
        
        .contact-label {
            font-weight: 500;
            color: #666;
            font-size: 14px;
            margin-bottom: 3px;
        }
        
        .contact-value {
            font-size: 16px;
            font-weight: 500;
        }
        
        .contact-form {
            flex: 1;
            min-width: 300px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            font-weight: 500;
            margin-bottom: 8px;
            font-size: 16px;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            font-size: 16px;
            transition: border 0.3s;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
        
        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }
        
        .form-btn {
            background: #1890ff;
            color: white;
            border: none;
            padding: 12px 30px;
            font-size: 16px;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.3s;
            display: inline-block;
            font-weight: 500;
        }
        
        .form-btn:hover {
            background: #096dd9;
        }
        
        /* 地图区域 */
        .map-section {
            margin-bottom: 60px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }
        
        .location-header {
            padding: 20px 30px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .location-title {
            font-size: 22px;
            font-weight: 600;
            color: #333;
        }
        
        .map-container {
            height: 400px;
            position: relative;
            background: #e9ecef;
        }
        
        .map-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(233, 236, 239, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
        }
        
        .map-placeholder {
            max-width: 500px;
        }
        
        .placeholder-icon {
            font-size: 50px;
            color: #1890ff;
            margin-bottom: 20px;
        }
        
        .placeholder-text {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 15px;
            color: #333;
        }
        
        .placeholder-desc {
            font-size: 16px;
            color: #666;
            margin-bottom: 25px;
        }
        
        /* FAQ部分 */
        .faq-section {
            margin-bottom: 60px;
        }
        
        .faq-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .faq-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 10px;
            color: #333;
        }
        
        .faq-subtitle {
            font-size: 16px;
            color: #666;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .faq-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
        }
        
        .faq-item {
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            padding: 25px;
            transition: box-shadow 0.3s;
        }
        
        .faq-item:hover {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
        
        .faq-question {
            display: flex;
            margin-bottom: 15px;
        }
        
        .faq-q {
            font-size: 24px;
            color: #1890ff;
            margin-right: 15px;
            font-weight: 700;
        }
        
        .faq-text {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        
        .faq-answer {
            font-size: 15px;
            color: #666;
            line-height: 1.7;
        }
        
        /* 底部区域 */
        .footer {
            background: #141d38;
            color: #eaeaea;
            padding: 60px 0 30px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 50px;
        }
        
        .footer-column h3 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
            color: white;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 12px;
        }
        
        .footer-links a {
            color: #a0a0a0;
            text-decoration: none;
            transition: color 0.3s;
            font-size: 15px;
        }
        
        .footer-links a:hover {
            color: #1890ff;
        }
        
        .contact-methods {
            list-style: none;
        }
        
        .contact-methods li {
            display: flex;
            margin-bottom: 15px;
            align-items: flex-start;
        }
        
        .contact-methods i {
            margin-right: 12px;
            font-size: 16px;
            color: #1890ff;
            min-width: 20px;
        }
        
        .contact-methods span {
            color: #eaeaea;
            font-size: 15px;
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid #2d354e;
            font-size: 14px;
            color: #a0a0a0;
        }
        
        .social-icons {
            display: flex;
            margin-top: 20px;
        }
        
        .social-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #2d354e;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: white;
            font-size: 16px;
            transition: background 0.3s;
        }
        
        .social-icon:hover {
            background: #1890ff;
        }
        
        .qrcode-container {
            margin-top: 20px;
            text-align: center;
        }
        
        .qrcode {
            width: 130px;
            height: 130px;
            background: #eaeaea;
            margin: 0 auto 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            color: #333;
        }
        
        .qrcode-label {
            font-size: 14px;
            color: #a0a0a0;
        }
    </style>
</head>
<body>
    
    <!-- 页面标题区域 -->
    <div class="page-header">
        <div class="container">
            <h1 class="page-title">联系我们</h1>
            <p class="page-subtitle">无论您有任何问题、建议或合作意向，我们都期待与您沟通。请选择最便捷的联系方式或填写反馈表单</p>
        </div>
    </div>
    
    <div class="container">
        <!-- 联系信息区 -->
        <div class="contact-section">
            <div class="contact-info">
                <!-- 联系信息卡片 -->
                <div class="contact-card">
                    <div class="card-header">
                        <div class="card-icon">
                            <i class="fas fa-headset"></i>
                        </div>
                        <h2 class="card-title">客服支持</h2>
                    </div>
                    <ul class="contact-list">
                        <li class="contact-item">
                            <i class="fas fa-phone"></i>
                            <div class="contact-details">
                                <div class="contact-label">客服电话</div>
                                <div class="contact-value">400-888-1234</div>
                            </div>
                        </li>
                        <li class="contact-item">
                            <i class="fas fa-clock"></i>
                            <div class="contact-details">
                                <div class="contact-label">服务时间</div>
                                <div class="contact-value">工作日 8:30-21:00，周末 9:00-18:00</div>
                            </div>
                        </li>
                        <li class="contact-item">
                            <i class="fas fa-envelope"></i>
                            <div class="contact-details">
                                <div class="contact-label">客服邮箱</div>
                                <div class="contact-value">support@multi-roles.com</div>
                            </div>
                        </li>
                        <li class="contact-item">
                            <i class="fab fa-whatsapp"></i>
                            <div class="contact-details">
                                <div class="contact-label">在线客服</div>
                                <div class="contact-value">点击网站右下角"在线客服"图标</div>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <!-- 商务合作卡片 -->
                <div class="contact-card">
                    <div class="card-header">
                        <div class="card-icon">
                            <i class="fas fa-handshake"></i>
                        </div>
                        <h2 class="card-title">商务合作</h2>
                    </div>
                    <ul class="contact-list">
                        <li class="contact-item">
                            <i class="fas fa-user-tie"></i>
                            <div class="contact-details">
                                <div class="contact-label">商务负责人</div>
                                <div class="contact-value">王经理</div>
                            </div>
                        </li>
                        <li class="contact-item">
                            <i class="fas fa-phone"></i>
                            <div class="contact-details">
                                <div class="contact-label">联系电话</div>
                                <div class="contact-value">185-1234-5678</div>
                            </div>
                        </li>
                        <li class="contact-item">
                            <i class="fas fa-envelope"></i>
                            <div class="contact-details">
                                <div class="contact-label">合作邮箱</div>
                                <div class="contact-value">partner@multi-roles.com</div>
                            </div>
                        </li>
                        <li class="contact-item">
                            <i class="fas fa-file-contract"></i>
                            <div class="contact-details">
                                <div class="contact-label">合作类型</div>
                                <div class="contact-value">企业商家入驻、服务商合作、广告推广</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 联系表单 -->
            <div class="contact-form">
                <div class="contact-card">
                    <div class="card-header">
                        <div class="card-icon">
                            <i class="fas fa-comments"></i>
                        </div>
                        <h2 class="card-title">问题反馈</h2>
                    </div>
                    
                    <form id="feedback-form">
                        <div class="form-group">
                            <label for="name" class="form-label">您的姓名</label>
                            <input type="text" id="name" class="form-control" placeholder="请输入您的姓名" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="contact" class="form-label">联系方式</label>
                            <input type="text" id="contact" class="form-control" placeholder="电话/邮箱/微信等" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="category" class="form-label">问题类型</label>
                            <select id="category" class="form-control">
                                <option value="">请选择问题类型</option>
                                <option value="account">账号问题</option>
                                <option value="payment">支付问题</option>
                                <option value="task">任务相关问题</option>
                                <option value="suggest">功能建议</option>
                                <option value="other">其他问题</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="message" class="form-label">问题描述</label>
                            <textarea id="message" class="form-control" placeholder="请详细描述您的问题、建议或合作意向..." required></textarea>
                        </div>
                        
                        <button type="submit" class="form-btn">提交反馈</button>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- 地图区域 -->
        <div class="map-section">
            <div class="location-header">
                <h2 class="location-title">我们在这里</h2>
            </div>
            <div class="map-container">
                <div class="map-overlay">
                    <div class="map-placeholder">
                        <div class="placeholder-icon">
                            <i class="fas fa-map-marked-alt"></i>
                        </div>
                        <h3 class="placeholder-text">公司总部位置</h3>
                        <p class="placeholder-desc">中国广西南宁市青秀区民族大道136号华润大厦B座2801室</p>
                        
                        <h3 class="placeholder-text">分公司位置</h3>
                        <ul style="text-align: left; padding-left: 20px;">
                            <li style="margin-bottom: 10px;">广州市天河区珠江新城华夏路30号富力中心</li>
                            <li>柳州市鱼峰区白沙路15号中房大厦</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 常见问题 -->
        <div class="faq-section">
            <div class="faq-header">
                <h2 class="faq-title">常见问题</h2>
                <p class="faq-subtitle">以下是用户经常咨询的问题，希望可以帮助您快速找到答案</p>
            </div>
            
            <div class="faq-container">
                <div class="faq-item">
                    <div class="faq-question">
                        <div class="faq-q">Q</div>
                        <div class="faq-text">如何成为平台从业者？需要满足什么条件？</div>
                    </div>
                    <div class="faq-answer">
                        只需完成实名认证并缴纳规则押金即可成为平台从业者。一个身份证只能认证一个账号，从业者需要遵守平台规则，违规行为会受到警告、冻结直至封号等处罚。
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <div class="faq-q">Q</div>
                        <div class="faq-text">提现有哪些限制？为什么提现金额有限制？</div>
                    </div>
                    <div class="faq-answer">
                        个人用户每月提现限额为1.5万元，平台商家为15万元/月。此限制是根据金融安全监管要求设置的，确保平台资金安全和合规运营。
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <div class="faq-q">Q</div>
                        <div class="faq-text">任务发布后如何确保执行方按时完成？</div>
                    </div>
                    <div class="faq-answer">
                        平台采取分阶段结算机制，您可以设置多个阶段任务并分别结算。每个阶段完成后，您验收满意再支付该阶段费用。平台将冻结任务总金额以确保安全。
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <div class="faq-q">Q</div>
                        <div class="faq-text">遇到任务纠纷如何解决？</div>
                    </div>
                    <div class="faq-answer">
                        任何一方均可点击"我有异议"发起纠纷处理。平台将冻结该笔交易金额，由双方协商解决。若协商不成，平台将根据双方提供的聊天记录等证据链进行仲裁。
                    </div>
                </div>
            </div>
        </div>
    </div>

    
    <script>
        // 表单提交处理
        document.getElementById('feedback-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const formData = {
                name: document.getElementById('name').value,
                contact: document.getElementById('contact').value,
                category: document.getElementById('category').value,
                message: document.getElementById('message').value
            };
            
            // 在实际应用中，这里应该发送到后端服务器
            console.log('表单数据:', formData);
            
            // 显示成功信息
            alert('反馈信息已提交成功！我们将在1-3个工作日内回复您。');
            
            // 重置表单
            this.reset();
        });
    </script>
</body>
</html>